<template>
  <div>
    <!-- <div style="font-size:18px;">后台首页</div>
    <hr>
    <br> -->
    <div style="height: 100%;width: 100%;">
      <!-- <img class="img" src="../../assets/shouye.jpg"> -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card1 bgBox">
            <div class="info-item">
              <span style="font-size: 28px;font-weight: 600;">{{todaySaleNum}}</span>
              <!-- <count-to class="info-item-num" :startVal='0' :endVal='todaySaleNum' :duration='3400'></count-to> -->
              <p class="info-item-text">今日销量</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card2 bgBox">
            <div class="info-item">
              <span style="font-size: 28px;font-weight: 600;">{{weekSaleNum}}</span>
              <!-- <count-to class="info-item-num" :startVal='0' :endVal='weekSaleNum' :duration='3600'></count-to> -->
              <p class="info-item-text">本周销量</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card3 bgBox">
            <div class="info-item">
              <span style="font-size: 28px;font-weight: 600;">{{addMemberNum}}</span>
              <!-- <count-to class="info-item-num" :startVal='0' :endVal='addMemberNum' :duration='3600'></count-to> -->
              <p class="info-item-text">本周新增用户</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- <el-col :span="9">
          <bar-chart></bar-chart>
          <div></div> -->
        </el-col>
        <el-col :span="24">
          <line-chart :oneList="oneList" :twoList="twoList" :dateList="dateList"></line-chart>
          <div style="text-align: center;">销售报表</div>
          <hr>
        </el-col>
      </el-row>

    </div>
  </div>
</template>
<script>
    import barChart from '../common/barChart'
    import lineChart from '../common/lineChart'
    import countTo from 'vue-count-to';
    import $ from 'jquery';
    import Vue from 'vue';
    import {store} from 'vuex'
  export default {
    data() {
        return {
            addMemberNum: 0,
            todaySaleNum: 0,
            weekSaleNum: 0.09,
            oneList: [],
            twoList: [],
            dateList: [],
            num2Weekday: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        };
    },
    components: {
      countTo,barChart,lineChart
    },
    created() {
      this.makeDateList()
      this.getAddMember()
      this.getTodaySale()
      this.getWeekChart()
    },
    mounted(){
      var self=this;
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      getTodaySale() {
        this.myajax("/main/today",{},res=>{
          if(res.code == 1000){
            // console.log(res)
            this.todaySaleNum = res.data.todayMoney
          }
        })
      },   
      getAddMember() {
        this.myajax("/main/week",{},res=>{
          if(res.code == 1000){
            // console.log(res)
            this.weekSaleNum = res.data.weekMoney
            this.addMemberNum = res.data.userEntityCount
          }
        })
      },
      getWeekChart() {
        this.myajax("/main/before",{},res=>{
          if(res.code == 1000){
            console.log(666)
            console.log(res)
            let oneList = res.data.onelist
            let twoList = res.data.twolist
            this.oneList = oneList.reverse()
            this.twoList = twoList.reverse()
          }
        })
      },
      makeDateList() { 
        let startDate = new Date()
        let nowDate = startDate.getDate()
        startDate.setDate(nowDate - 6)
        let fromDay = startDate.getDay() || 7
        let dateList = []
        for(let i in this.num2Weekday){
          let m = fromDay*1+i*1
          let str;
          m-=1
          if(m<=6){
            str = this.num2Weekday[m]
          }else{
            str = this.num2Weekday[m-7]
          }
          dateList.push(str)
        }
        this.dateList = dateList
        console.log(dateList)
      },
      // makeDateList() {    
      //   let startDate = new Date()
      //   startDate.setHours(0)
      //   startDate.setMinutes(0)
      //   startDate.setSeconds(0)
      //   let nowDay = startDate.getDay() || 7
      //   let nowDate = startDate.getDate()
      //   startDate.setDate(nowDate + 1 - nowDay)
      //   console.log(startDate)

      //   let endDate = new Date()
      //   endDate.setHours(23)
      //   endDate.setMinutes(59)
      //   endDate.setSeconds(59)
      //   endDate.setDate(nowDate + 7 - nowDay)
      //   console.log(endDate)
      //   let _data = {
      //       pageNumber: 1,
      //       pageSize: 100000,
      //       param: {
      //         startTime: startDate,
      //         endTime: endDate,
      //       },
      //   }
      //   this.myajax("/user_entity/list",_data,res=>{
      //     if(res.code == 1000){
      //       console.log(res)
      //       // this.tableData = res.data.list
      //       this.addMemberNum = res.data.total
      //     }
      //   })
      // },
    }
  };
</script>
<style scoped>
    .bgBox{
      height: 120px;
      color: #fff;
    }
    .bgBox .info-item-num{
      font-size: 28px;
      font-weight: 600;
    }
    .bgBox p{
      padding-top: 10px;
    }
    .box-card1{
      background: rgb(0,192,239);
    } 
    .box-card2{
      background: rgb(243,157,18);
    }
    .box-card3{
      background: rgb(2,166,89);
    }
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .img{
      height: 100%;
      width: 100%;
    }
</style>
